<template>
  <div style="margin-bottom: 20px" v-if="detailList && detailList.length > 0">
    <div style="font-size: 16px;font-weight: 600;margin-bottom: 10px;">缺货订单明细</div>
    <a-table class="expandCloud" :customHeaderRow="customHeaderRow" :pagination="false" bordered  :dataSource="detailList" :columns="detailColumns"/>
<!--    <el-table :data="detailList" border style="width: 100%;margin-top: 10px"-->
<!--              :header-cell-style="{'text-align': 'center','color':'black','background-color':'#6593d5'}"-->
<!--              :cell-style="{'text-align': 'center','color':'black'}">-->
<!--      <el-table-column v-for="item in detailColumns" :width="item.width" :prop="item.dataIndex" :label="item.title"/>-->
<!--    </el-table>-->
  </div>
  <div v-if="skuDetailList && skuDetailList.length > 0">
    <h3  style="font-size: 16px;font-weight: 600;margin-bottom: 10px;">库存明细</h3>
    <a-table class="expandCloud" :customHeaderRow="customHeaderRow" :pagination="false" bordered :dataSource="skuDetailList" :columns="skuDetailColumns"/>
<!--    <el-table :data="skuDetailList" border style="width: 100%;margin-top: 10px"-->
<!--              :header-cell-style="{'text-align': 'center','color':'black','background-color':'#6593d5'}"-->
<!--              :cell-style="{'text-align': 'center','color':'black'}">-->
<!--      <el-table-column v-for="item in skuDetailColumns" :width="item.width" :prop="item.dataIndex" :label="item.title"/>-->
<!--    </el-table>-->
  </div>
  <div v-if="detailList && detailList.length === 0 && skuDetailList && skuDetailList.length === 0">
    <a-empty />
  </div>
</template>
<script setup>
import {ref, defineProps, defineExpose} from "vue";
import {getLackOrder, getListCloudProductInventory} from "@/api/inventoryPools/cloudWarehouses.js";
import {message} from "ant-design-vue";

const props = defineProps({
  productSku:{
    type:String,
    default:''
  },
})
const detailColumns = [
  {
    title: '站点',
    dataIndex: 'site',
    align: 'center'
  },
  {
    title: '平台',
    dataIndex: 'platform',
    align: 'center'
  },
  {
    title: '订单号',
    dataIndex: 'orderId',
    align: 'center'
  },
  {
    title: '易仓订单',
    dataIndex: 'saleOrderCode',
    align: 'center'
  },
  {
    title: '下单时间',
    dataIndex: 'orderCreateTime',
    align: 'center'
  },
  {
    title: '平台SKU',
    dataIndex: 'productSku',
    align: 'center'
  },
  {
    title: '仓库SKU',
    dataIndex: 'warehouseSku',
    align: 'center'
  },
  {
    title: '数量',
    dataIndex: 'qty',
    align: 'center'
  }
]
const skuDetailColumns = [
  {
    title: '仓库',
    dataIndex: 'warehouseCode',
    align: 'center'
  },
  {
    title: '平台SKU',
    dataIndex: 'productSku',
    align: 'center'
  },
  {
    title: '仓库SKU',
    dataIndex: 'warehouseSku',
    align: 'center'
  },
  {
    title: '库存数',
    dataIndex: 'qtySellable',
    align: 'center'
  },
]
const detailList = ref([])
const skuDetailList = ref([])
const init = async () => {
  try{
    const res1 = await getLackOrder({productSku:props.productSku})
    const res2 = await getListCloudProductInventory({productSku:props.productSku})
    detailList.value = res1.result.records
    skuDetailList.value = res2.result.records
    console.log(detailList.value, skuDetailList.value)
  }catch (e){
    message.error(e)
  }
}
const customHeaderRow = (column, index) => {
  return {
    class: "header-row",
  };
};
defineExpose({
  init
})
</script>

<style  lang="less">
.expandCloud {
  .header-row > th {
    background-color: #6593d5!important;
  }
}
</style>
